import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'
import Home from '../src/containers/Home'
import Create from '../src/containers/Create'
import { testCategories, testItems } from './testData'
import { flatternArr } from './utility'

export const AppContext = React.createContext()

class App extends Component {
  state = {
    categories: flatternArr(testCategories),
    items: flatternArr(testItems),
  }

  render() {
    return (
      <AppContext.Provider value={{
        state: this.state
      }}>
        <Router>
          <div className="App">
            <div className="container pb-5">
              <Route path="/" exact component={Home} />
              <Route path="/create" component={Create} />
              <Route path="/edit/:id" component={Create} />
            </div>
          </div>
        </Router>
      </AppContext.Provider>
    );
  }
}

export default App;
